<template>
  <div class="settings-page">
    <div class="page-header">
      <h1>系统设置</h1>
    </div>
    
    <div class="page-content">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基础设置" name="basic">
          <el-form :model="basicSettings" label-width="120px">
            <el-form-item label="网站名称">
              <el-input v-model="basicSettings.siteName" />
            </el-form-item>
            <el-form-item label="网站描述">
              <el-input v-model="basicSettings.siteDesc" type="textarea" />
            </el-form-item>
            <el-form-item label="联系邮箱">
              <el-input v-model="basicSettings.email" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="高级设置" name="advanced">
          <el-form :model="advancedSettings" label-width="120px">
            <el-form-item label="缓存时间">
              <el-input-number v-model="advancedSettings.cacheTime" />
            </el-form-item>
            <el-form-item label="调试模式">
              <el-switch v-model="advancedSettings.debugMode" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      
      <div class="form-actions">
        <el-button type="primary">保存设置</el-button>
      </div>
    </div>
    
    <div class="navigation">
      <router-link to="/">
        <el-button>返回工作台</el-button>
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

const activeTab = ref('basic')

const basicSettings = reactive({
  siteName: '内容管理系统',
  siteDesc: '一个现代化的内容管理系统',
  email: 'admin@example.com'
})

const advancedSettings = reactive({
  cacheTime: 3600,
  debugMode: false
})

onMounted(() => {
  console.log('系统设置页面已加载')
})
</script>

<style scoped>
.settings-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.form-actions {
  margin-top: 20px;
  text-align: center;
}

.navigation {
  text-align: center;
  padding: 20px 0;
}
</style>